<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>实现随机出题 - wazanHub</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="wazan" /><meta name="description" content="好的项目逻辑开发要记下备用
年初疫情肆虐，在家办公赶一个上汽大众答题抢返现券支付宝活动，最近活动翻新出第二版，需求变得简单了，相比第一版开发精华都不需要，保留了基本的样子。 找出源码review下，感觉有必要做下项目总结
总体需求  正常套路，线上扫码进入活动页， 答题达到合格分数60分可领购车券， 未及格通过将活动分享好友获取再次抽奖机会，直到领券成功。 答完全部题提交可查看答案  开发思路 这里将活动分为3个页面
 首页index.html 活动页enter.html 分享页share.html  主要需求在enter.html
 实现22道题中出任意10道题的效果：通过将n个元素的数组随机排序，再截取前m位来实现达到同样随机性目的 分享获取机会：从 getUserInfo.jsp 获取用户uid，分享的时候利用二维码插件生成带有该uid的二维码的分享图，朋友通过扫该分享图进入活动即算助力前者。 （前端只需生成携带uid的分享图，剩下后端搞定即可）  以下是进入活动页enter.html
先请求后台接口getUserInfo.jsp获取用户信息，对用户当前状态进行判断：
捋下思路做个流程图如下： 实现出题需求 需求方提供22道题目，其中10道汽车类，12道防疫类，要求各取任意5道题，组成10道题目，每道题10分，最后成绩60分以上算合格。
（要是能直接从后端接口获取题目就省事多了，但开发小哥并没有这样做，出题这块只能由我来实现，从难度上讲感觉实现这个前后端是一样的）
首先这里22道题只出10道，就要符合排列组合的顺序的 随机性，那样有多种可能。
换个角度思考： 我们只要满足 汽车题随机性 和 防疫题的随机性 两个就可以，
那我们通过打乱题目数组的顺序，然后取前10个元素不就同样满足这种随机性
做法：
1.打乱数组顺序的方法
randomSort:function(arr){// 利用数组排序方法sort（）,arr.sort(function(a,b){// Math.random()返回[0,1)的任意一个小数 - 中间数0.5 = 有两种可能 &amp;gt;0 || &amp;lt;0return Math.random() - 0.5;});return arr;},2.新建一个参考数组oldArr 代表题目数组，用数字大小才能进行sort（）比较，随机排列各个数组元素,获取前5个元素
// 10道汽车题中getNewArr1:function(arr){var oldData=arr,newData=[],oldArr=[0,1,2,3,4,5,6,7,8,9],newArr=[];//新随机排序数组newArr=comm." /><meta name="keywords" content="wazan, study" />






<meta name="generator" content="Hugo 0.70.0 with theme even" />


<link rel="canonical" href="http://wazan.gitee.io/blog/post/t-%E9%9A%8F%E6%9C%BA%E5%87%BA%E9%A2%98/" />
<link rel="apple-touch-icon" sizes="180x180" href="/blog/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/blog/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/blog/favicon-16x16.png">
<link rel="manifest" href="/blog/manifest.json">
<link rel="mask-icon" href="/blog/safari-pinned-tab.svg" color="#5bbad5">



<link href="/blog/sass/main.min.b70575932d58f00331c6aacffef9d6f69bd146e84ff98ee769622d3439951b79.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="实现随机出题" />
<meta property="og:description" content="好的项目逻辑开发要记下备用
年初疫情肆虐，在家办公赶一个上汽大众答题抢返现券支付宝活动，最近活动翻新出第二版，需求变得简单了，相比第一版开发精华都不需要，保留了基本的样子。 找出源码review下，感觉有必要做下项目总结
总体需求  正常套路，线上扫码进入活动页， 答题达到合格分数60分可领购车券， 未及格通过将活动分享好友获取再次抽奖机会，直到领券成功。 答完全部题提交可查看答案  开发思路 这里将活动分为3个页面
 首页index.html 活动页enter.html 分享页share.html  主要需求在enter.html
 实现22道题中出任意10道题的效果：通过将n个元素的数组随机排序，再截取前m位来实现达到同样随机性目的 分享获取机会：从 getUserInfo.jsp 获取用户uid，分享的时候利用二维码插件生成带有该uid的二维码的分享图，朋友通过扫该分享图进入活动即算助力前者。 （前端只需生成携带uid的分享图，剩下后端搞定即可）  以下是进入活动页enter.html
先请求后台接口getUserInfo.jsp获取用户信息，对用户当前状态进行判断：
捋下思路做个流程图如下： 实现出题需求 需求方提供22道题目，其中10道汽车类，12道防疫类，要求各取任意5道题，组成10道题目，每道题10分，最后成绩60分以上算合格。
（要是能直接从后端接口获取题目就省事多了，但开发小哥并没有这样做，出题这块只能由我来实现，从难度上讲感觉实现这个前后端是一样的）
首先这里22道题只出10道，就要符合排列组合的顺序的 随机性，那样有多种可能。
换个角度思考： 我们只要满足 汽车题随机性 和 防疫题的随机性 两个就可以，
那我们通过打乱题目数组的顺序，然后取前10个元素不就同样满足这种随机性
做法：
1.打乱数组顺序的方法
randomSort:function(arr){// 利用数组排序方法sort（）,arr.sort(function(a,b){// Math.random()返回[0,1)的任意一个小数 - 中间数0.5 = 有两种可能 &gt;0 || &lt;0return Math.random() - 0.5;});return arr;},2.新建一个参考数组oldArr 代表题目数组，用数字大小才能进行sort（）比较，随机排列各个数组元素,获取前5个元素
// 10道汽车题中getNewArr1:function(arr){var oldData=arr,newData=[],oldArr=[0,1,2,3,4,5,6,7,8,9],newArr=[];//新随机排序数组newArr=comm." />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://wazan.gitee.io/blog/post/t-%E9%9A%8F%E6%9C%BA%E5%87%BA%E9%A2%98/" />
<meta property="article:published_time" content="2020-06-29T14:28:13+08:00" />
<meta property="article:modified_time" content="2020-06-29T14:28:13+08:00" />
<meta itemprop="name" content="实现随机出题">
<meta itemprop="description" content="好的项目逻辑开发要记下备用
年初疫情肆虐，在家办公赶一个上汽大众答题抢返现券支付宝活动，最近活动翻新出第二版，需求变得简单了，相比第一版开发精华都不需要，保留了基本的样子。 找出源码review下，感觉有必要做下项目总结
总体需求  正常套路，线上扫码进入活动页， 答题达到合格分数60分可领购车券， 未及格通过将活动分享好友获取再次抽奖机会，直到领券成功。 答完全部题提交可查看答案  开发思路 这里将活动分为3个页面
 首页index.html 活动页enter.html 分享页share.html  主要需求在enter.html
 实现22道题中出任意10道题的效果：通过将n个元素的数组随机排序，再截取前m位来实现达到同样随机性目的 分享获取机会：从 getUserInfo.jsp 获取用户uid，分享的时候利用二维码插件生成带有该uid的二维码的分享图，朋友通过扫该分享图进入活动即算助力前者。 （前端只需生成携带uid的分享图，剩下后端搞定即可）  以下是进入活动页enter.html
先请求后台接口getUserInfo.jsp获取用户信息，对用户当前状态进行判断：
捋下思路做个流程图如下： 实现出题需求 需求方提供22道题目，其中10道汽车类，12道防疫类，要求各取任意5道题，组成10道题目，每道题10分，最后成绩60分以上算合格。
（要是能直接从后端接口获取题目就省事多了，但开发小哥并没有这样做，出题这块只能由我来实现，从难度上讲感觉实现这个前后端是一样的）
首先这里22道题只出10道，就要符合排列组合的顺序的 随机性，那样有多种可能。
换个角度思考： 我们只要满足 汽车题随机性 和 防疫题的随机性 两个就可以，
那我们通过打乱题目数组的顺序，然后取前10个元素不就同样满足这种随机性
做法：
1.打乱数组顺序的方法
randomSort:function(arr){// 利用数组排序方法sort（）,arr.sort(function(a,b){// Math.random()返回[0,1)的任意一个小数 - 中间数0.5 = 有两种可能 &gt;0 || &lt;0return Math.random() - 0.5;});return arr;},2.新建一个参考数组oldArr 代表题目数组，用数字大小才能进行sort（）比较，随机排列各个数组元素,获取前5个元素
// 10道汽车题中getNewArr1:function(arr){var oldData=arr,newData=[],oldArr=[0,1,2,3,4,5,6,7,8,9],newArr=[];//新随机排序数组newArr=comm.">
<meta itemprop="datePublished" content="2020-06-29T14:28:13&#43;08:00" />
<meta itemprop="dateModified" content="2020-06-29T14:28:13&#43;08:00" />
<meta itemprop="wordCount" content="101">



<meta itemprop="keywords" content="项目总结," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="实现随机出题"/>
<meta name="twitter:description" content="好的项目逻辑开发要记下备用
年初疫情肆虐，在家办公赶一个上汽大众答题抢返现券支付宝活动，最近活动翻新出第二版，需求变得简单了，相比第一版开发精华都不需要，保留了基本的样子。 找出源码review下，感觉有必要做下项目总结
总体需求  正常套路，线上扫码进入活动页， 答题达到合格分数60分可领购车券， 未及格通过将活动分享好友获取再次抽奖机会，直到领券成功。 答完全部题提交可查看答案  开发思路 这里将活动分为3个页面
 首页index.html 活动页enter.html 分享页share.html  主要需求在enter.html
 实现22道题中出任意10道题的效果：通过将n个元素的数组随机排序，再截取前m位来实现达到同样随机性目的 分享获取机会：从 getUserInfo.jsp 获取用户uid，分享的时候利用二维码插件生成带有该uid的二维码的分享图，朋友通过扫该分享图进入活动即算助力前者。 （前端只需生成携带uid的分享图，剩下后端搞定即可）  以下是进入活动页enter.html
先请求后台接口getUserInfo.jsp获取用户信息，对用户当前状态进行判断：
捋下思路做个流程图如下： 实现出题需求 需求方提供22道题目，其中10道汽车类，12道防疫类，要求各取任意5道题，组成10道题目，每道题10分，最后成绩60分以上算合格。
（要是能直接从后端接口获取题目就省事多了，但开发小哥并没有这样做，出题这块只能由我来实现，从难度上讲感觉实现这个前后端是一样的）
首先这里22道题只出10道，就要符合排列组合的顺序的 随机性，那样有多种可能。
换个角度思考： 我们只要满足 汽车题随机性 和 防疫题的随机性 两个就可以，
那我们通过打乱题目数组的顺序，然后取前10个元素不就同样满足这种随机性
做法：
1.打乱数组顺序的方法
randomSort:function(arr){// 利用数组排序方法sort（）,arr.sort(function(a,b){// Math.random()返回[0,1)的任意一个小数 - 中间数0.5 = 有两种可能 &gt;0 || &lt;0return Math.random() - 0.5;});return arr;},2.新建一个参考数组oldArr 代表题目数组，用数字大小才能进行sort（）比较，随机排列各个数组元素,获取前5个元素
// 10道汽车题中getNewArr1:function(arr){var oldData=arr,newData=[],oldArr=[0,1,2,3,4,5,6,7,8,9],newArr=[];//新随机排序数组newArr=comm."/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/blog/" class="logo">wazanHub</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/blog/">
        <li class="mobile-menu-item">首页</li>
      </a><a href="/blog/post/">
        <li class="mobile-menu-item">归档</li>
      </a><a href="/blog/tags/">
        <li class="mobile-menu-item">标签</li>
      </a><a href="/blog/categories/">
        <li class="mobile-menu-item">分类</li>
      </a><a href="/blog/about/">
        <li class="mobile-menu-item">关于</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/blog/" class="logo">wazanHub</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/blog/">首页</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/blog/post/">归档</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/blog/tags/">标签</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/blog/categories/">分类</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/blog/about/">关于</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">实现随机出题</h1>

      <div class="post-meta">
        <span class="post-time"> 2020-06-29 </span>
        <div class="post-category">
            <a href="/blog/categories/%E9%A1%B9%E7%9B%AE/"> 项目 </a>
            </div>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#总体需求">总体需求</a></li>
    <li><a href="#开发思路">开发思路</a></li>
    <li><a href="#实现出题需求">实现出题需求</a></li>
    <li><a href="#页面展示">页面展示</a></li>
    <li><a href="#资源地址">资源地址</a></li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <p><strong><code>好的项目逻辑开发要记下备用</code></strong></p>
<p><!-- raw HTML omitted --> <!-- raw HTML omitted -->
年初疫情肆虐，在家办公赶一个上汽大众答题抢返现券支付宝活动，最近活动翻新出第二版，需求变得简单了，相比第一版开发精华都不需要，保留了基本的样子。
找出源码review下，感觉有必要做下项目总结</p>
<h2 id="总体需求">总体需求</h2>
<ul>
<li>正常套路，线上扫码进入活动页，</li>
<li>答题达到合格分数60分可领购车券，</li>
<li>未及格通过将活动分享好友获取再次抽奖机会，直到领券成功。</li>
<li>答完全部题提交可查看答案</li>
</ul>
<p><!-- raw HTML omitted --> <!-- raw HTML omitted --></p>
<h2 id="开发思路">开发思路</h2>
<p><strong>这里将活动分为3个页面</strong></p>
<ul>
<li>首页index.html</li>
<li>活动页enter.html</li>
<li>分享页share.html</li>
</ul>
<p><strong>主要需求在enter.html</strong></p>
<ul>
<li><code>实现22道题中出任意10道题的效果</code>：通过将n个元素的数组随机排序，再截取前m位来实现达到同样随机性目的</li>
<li><code>分享获取机会</code>：从 getUserInfo.jsp 获取用户uid，分享的时候利用二维码插件生成带有该uid的二维码的分享图，朋友通过扫该分享图进入活动即算助力前者。
（前端只需生成携带uid的分享图，剩下后端搞定即可）</li>
</ul>
<p><strong>以下是进入活动页enter.html</strong><br>
先请求后台接口<code>getUserInfo.jsp</code>获取用户信息，对用户当前状态进行判断：<br>
捋下思路做个流程图如下：
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06e57dba912747f091b36e23b7419e25~tplv-k3u1fbpfcp-zoom-1.image" alt="活动"></p>
<p><!-- raw HTML omitted --> <!-- raw HTML omitted --></p>
<h2 id="实现出题需求">实现出题需求</h2>
<p>需求方提供22道题目，其中10道汽车类，12道防疫类，要求各取<code>任意5道题</code>，组成10道题目，每道题10分，最后成绩60分以上算合格。<br>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c5a0101c1ed4bef9a828c24724a3935~tplv-k3u1fbpfcp-zoom-1.image" alt="活动"></p>
<p>（要是能直接从后端接口获取题目就省事多了，但开发小哥并没有这样做，出题这块只能由我来实现，从难度上讲感觉实现这个前后端是一样的）</p>
<p>首先这里22道题只出10道，就要符合<code>排列组合</code>的顺序的 随机性，那样有多种可能。</p>
<p><strong>换个角度思考：</strong>
我们只要满足 <code>汽车题随机性</code> 和 <code>防疫题的随机性</code> 两个就可以，<br>
那我们通过打乱题目数组的顺序，然后取前10个元素不就同样满足这种随机性<br>
做法：<br>
1.打乱数组顺序的方法</p>
<pre><code>randomSort:function(arr){

    // 利用数组排序方法sort（）,
    
    arr.sort(function(a,b){
        
        // Math.random()返回[0,1)的任意一个小数 - 中间数0.5 = 有两种可能 &gt;0 || &lt;0
        
        return Math.random() - 0.5;
    
    });
    
    return arr;
},
</code></pre><p>2.新建一个参考数组oldArr 代表题目数组，用数字大小才能进行sort（）比较，随机排列各个数组元素,获取前5个元素</p>
<pre><code>// 10道汽车题中
getNewArr1:function(arr){

    var oldData=arr,newData=[],
    
    oldArr=[0,1,2,3,4,5,6,7,8,9],newArr=[];
    
    //新随机排序数组
    newArr=comm.randomSort(oldArr)
    
    //取前面5道
    for(var i=0;i&lt;5;i++){
        
        newData.push(oldData[newArr[i]])
    
    }
    
    return newData;
},
// 12道防疫题处理做法类似
</code></pre><p>concat()组合获取到的两个新题目数组,一样进行数组排列，得到最终题目数组<code>finalItems</code></p>
<pre><code>//随机排列结合的数组元素,获取前10个元素
getItems:function(){

    var arr1=comm.getNewArr1(data1);
    
    var arr2=comm.getNewArr2(data2);

    var items=arr1.concat(arr2);

    var finalItems=[],oldArr=[0,1,2,3,4,5,6,7,8,9],newArr=[];
    
    newArr=comm.randomSort(oldArr)//新随机排序数组
    
    for(var i=0;i&lt;10;i++){
        
        finalItems.push(items[newArr[i]])
    
    }
    return finalItems;
},
</code></pre><p>3.最后根据数组渲染成dom元素</p>
<p><!-- raw HTML omitted --> <!-- raw HTML omitted --></p>
<h2 id="页面展示">页面展示</h2>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d32ea5637c0a404bb25f43d2b383edce~tplv-k3u1fbpfcp-zoom-1.image" alt="">
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ccd8185181647b4b0050b79e7fc0758~tplv-k3u1fbpfcp-zoom-1.image" alt="">
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50bd17964b304d4c92de26c9e60d2efc~tplv-k3u1fbpfcp-zoom-1.image" alt="">
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60587b53101543cfb090ad67e3d83271~tplv-k3u1fbpfcp-zoom-1.image" alt="">
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29c6933966d341a9ae028929ff9407b2~tplv-k3u1fbpfcp-zoom-1.image" alt="">
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/640d5904b2fb440c8edc90150fc5d2cf~tplv-k3u1fbpfcp-zoom-1.image" alt="">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0517ff495f184c019a40c2a8611f570c~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p>
<p><!-- raw HTML omitted --> <!-- raw HTML omitted --></p>
<h2 id="资源地址">资源地址</h2>
<p><a href="https://www1.pcauto.com.cn/zt/gz20200210/daz/index.html">线上地址</a>(活动已下线，后端控制进不了活动页)<br>
<a href="https://github.com/wazanHub/daz-zfb">源码地址</a></p>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">wazan</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2020-06-29
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      <div class="post-tags">
          <a href="/blog/tags/%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93/">项目总结</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/blog/post/%E9%A1%B9%E7%9B%AE%E9%9B%86%E5%90%88/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">项目集合</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/blog/post/t-%E7%BF%BB%E7%89%8C%E6%8A%BD%E5%A5%96/">
            <span class="next-text nav-default">翻牌抽奖</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:your@email.com" class="iconfont icon-email" title="email"></a>
      <a href="http://localhost:1313" class="iconfont icon-github" title="github"></a>
      <a href="http://localhost:1313" class="iconfont icon-zhihu" title="zhihu"></a>
  <a href="http://wazan.gitee.io/blog/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2019 - 
    2020
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">wazan</span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  <script src="/blog/lib/highlight/highlight.pack.js?v=20171001"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/blog/js/main.min.d7b7ada643c9c1a983026e177f141f7363b4640d619caf01d8831a6718cd44ea.js"></script>








</body>
</html>
